<template>
  <div class="test-scroing">
    <AppHeader
      :title="headerTitle"
      @rightClickEvent="handleHeaderRight()"
      style="background: rgb(0, 0, 0, 0)"
    >
      <template #left>
        <img src="@/assets/images/icon-arrow-left-white.png" height="20" />
      </template>
    </AppHeader>
    <div class="content">
      <div class="score-showing">
        <div class="icon-transparent-funnel">
          <img src="@/assets/images/wrongBook/icon-transparent-funnel.png" />
          <div class="">评分中</div>
        </div>
        <div class="sumit-work">
          作业提交成功
          <img src="@/assets/images/wrongBook/icon-finish.png" />
        </div>
        <div class="check-tip">请稍后在作业列表查看分数</div>
      </div>
      <div style="padding: 0 10px; margin-top: -45px">
        <div
          style="padding: 0 10px; background-color: #fff; border-radius: 15px"
        >
          <div class="test-answer-info">
            <div>
              <span>总分</span>
              <span>100分</span>
            </div>
            <div>
              <span>做答用时</span>
              <span>3min50s</span>
            </div>
            <div>
              <span>查看详情</span>
              <img
                class="icon-arrow-right-gray"
                src="@/assets/images/wrongBook/icon-arrow-right-gray.png"
              />
            </div>
            <div class="btn" style="border: none">
              <VanButton
                size="small"
                color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)"
                @click="goToBack()"
              >
                完成
              </VanButton>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <AppLoading v-if="loading.page" />
</template>
<script setup>
import { onMounted, reactive, toRefs, nextTick, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

import AppHeader from "@/components/AppHeader.vue";
import AppLoading from "@/components/AppLoading.vue";
import { showFailToast, Button as VanButton } from "vant";

const route = useRoute();
const router = useRouter();
const { title: subTitle, id: testId } = route.query;
const state = reactive({
  loading: {
    page: false,
  },
  testList: [],
});

const headerTitle = computed(() => {
  return `订正错题 ${subTitle}`;
});
onMounted(() => {
  state.loading.page = true;
  getTestScore();
});

const getTestScore = () => {
  state.loading.page = false;
};
const goToCorrection = (item) => {
  const { id, moreInfo } = item;
  router.push({
    path: "/wrongBook/correction",
    query: { id, title: moreInfo.name },
  });
};
const handleHeaderRight = () => {
  router.go(-1);
};
const goToBack = () => {
  router.replace({
    path: "/wrongBook/testList",
  });
};

const { loading } = toRefs(state);
</script>
<style scoped lang="scss">
.test-scroing {
  font-family: PingFangSC, PingFang SC;
  background: #f5f5f5;
  height: 100%;
  :deep(.app-header) {
    .center__txt {
      color: #fff;
    }
  }
  .content {
    box-sizing: border-box;
  }
  .score-showing {
    font-family: PingFangSC, PingFang SC;
    padding-top: 44px;
    background: linear-gradient(18deg, #29f19c 0%, #02a1f9 100%);
    display: flex;
    flex-direction: column;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }
    .icon-transparent-funnel {
      flex-direction: column;
      font-size: 28px;
      padding-bottom: 20px;
      img {
        width: 36px;
        margin: 40px 0 20px;
      }
      div {
        font-size: 28px;
      }
    }
    .sumit-work {
      padding-bottom: 12px;
      img {
        width: 18px;
        margin-left: 10px;
      }
    }
    .check-tip {
      padding-bottom: 72px;
    }
  }
  .test-answer-info {
    color: #333;
    width: 100%;
    font-size: 16px;
    div {
      padding: 16px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      box-sizing: border-box;
    }
    .icon-arrow-right-gray {
      width: 7px;
      height: 14px;
    }
    .btn {
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
      .van-button {
        height: 45px;
        width: 100%;
        border-radius: 20px;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
}
</style>
